<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PandaWiki - AI驱动的开源知识库系统</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight-text {
            position: relative;
            display: inline-block;
        }
        .highlight-text:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background-color: rgba(124, 58, 237, 0.3);
            z-index: -1;
            transition: height 0.3s ease;
        }
        .highlight-text:hover:after {
            height: 12px;
        }
        .drop-cap:first-letter {
            font-size: 3.5rem;
            line-height: 1;
            float: left;
            margin-right: 0.5rem;
            margin-top: 0.2rem;
            color: #4f46e5;
            font-weight: 700;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">PandaWiki</h1>
                    <p class="text-xl md:text-2xl mb-8 font-light opacity-90">AI大模型驱动的开源知识库系统</p>
                    <p class="text-lg mb-8 opacity-90">为企业和开发者打造智能化的文档管理解决方案，集成创作、问答与搜索功能</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://github.com/chaitin/PandaWiki" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300 flex items-center">
                            <i class="fab fa-github mr-2"></i> GitHub 仓库
                        </a>
                        <a href="#get-started" class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-indigo-600 transition duration-300 flex items-center">
                            <i class="fas fa-rocket mr-2"></i> 快速开始
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative">
                        <div class="w-64 h-64 md:w-80 md:h-80 bg-indigo-400 rounded-2xl shadow-xl transform rotate-6"></div>
                        <div class="absolute top-6 -right-6 w-64 h-64 md:w-80 md:h-80 bg-white rounded-2xl shadow-xl flex items-center justify-center p-6 transform -rotate-3">
                            <div class="text-center">
                                <i class="fas fa-brain text-5xl text-indigo-600 mb-4"></i>
                                <p class="text-gray-700 font-medium">AI驱动的知识管理</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">核心功能</h2>
                <div class="w-20 h-1 bg-indigo-500 mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">PandaWiki 提供全方位的知识管理解决方案，满足现代企业的各种需求</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6 text-indigo-600">
                        <i class="fas fa-pen-fancy text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">AI智能创作</h3>
                    <p class="text-gray-600">利用大模型生成文档初稿，大幅节省内容创作时间，提升写作效率</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6 text-indigo-600">
                        <i class="fas fa-comments text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">AI问答与搜索</h3>
                    <p class="text-gray-600">基于RAG技术，提供精准的知识库查询和对话式解答，提高信息获取效率</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6 text-indigo-600">
                        <i class="fas fa-plug text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多平台集成</h3>
                    <p class="text-gray-600">支持钉钉、飞书、企业微信等主流平台，无缝融入团队协作流程</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6 text-indigo-600">
                        <i class="fas fa-cog text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">自定义模型接入</h3>
                    <p class="text-gray-600">允许接入私有化AI模型，满足企业个性化需求和数据安全要求</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6 text-indigo-600">
                        <i class="fas fa-book text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">知识库管理</h3>
                    <p class="text-gray-600">支持多文档集合，灵活配置Wiki网站样式和权限，打造专属知识中心</p>
                </div>
                
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6 text-indigo-600">
                        <i class="fas fa-language text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多语言支持</h3>
                    <p class="text-gray-600">支持多语言文档处理，适应全球化团队的协作需求</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 bg-gray-100">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">使用场景</h2>
                <div class="w-20 h-1 bg-indigo-500 mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">PandaWiki 适用于多种知识管理与协作场景</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mr-4">
                            <i class="fas fa-code"></i>
                        </div>
                        <h3 class="text-lg font-bold">技术文档维护</h3>
                    </div>
                    <p class="text-gray-600">开发团队用PandaWiki快速生成API文档，AI辅助更新内容，减少手动维护成本，保持文档与代码同步。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mr-4">
                            <i class="fas fa-headset"></i>
                        </div>
                        <h3 class="text-lg font-bold">客户支持FAQ</h3>
                    </div>
                    <p class="text-gray-600">企业构建智能FAQ知识库，客户通过自然语言提问即可自助解决问题，大幅提升支持效率和服务体验。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mr-4">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3 class="text-lg font-bold">内部知识共享</h3>
                    </div>
                    <p class="text-gray-600">产品团队整合项目文档、会议记录等资料，AI搜索加速信息查找，打破信息孤岛，促进团队知识沉淀。</p>
                </div>
            </div>
            
            <div class="mt-12 bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="p-8 md:p-12">
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-2/3 mb-6 md:mb-0">
                            <h3 class="text-xl font-bold mb-3">你的团队是否需要一个智能化的文档管理工具来提升协作效率？</h3>
                            <p class="text-gray-600">PandaWiki 提供开源、可定制的解决方案，满足企业对知识管理的各种需求。</p>
                        </div>
                        <div class="md:w-1/3 flex justify-center md:justify-end">
                            <a href="https://github.com/chaitin/PandaWiki" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition duration-300 flex items-center">
                                <i class="fas fa-download mr-2"></i> 立即体验
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Comparison Section -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">优势与特色</h2>
                <div class="w-20 h-1 bg-indigo-500 mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">与传统知识管理工具相比，PandaWiki 提供更智能的解决方案</p>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-12">
                <div class="p-8">
                    <div class="mermaid">
                        graph TD
                            A[PandaWiki] --> B[AI智能创作]
                            A --> C[AI问答与搜索]
                            A --> D[多平台集成]
                            A --> E[自定义模型接入]
                            A --> F[开源可自托管]
                            style A fill:#4f46e5,color:#fff
                            style B fill:#6366f1,color:#fff
                            style C fill:#818cf8,color:#fff
                            style D fill:#a5b4fc,color:#fff
                            style E fill:#c7d2fe,color:#333
                            style F fill:#e0e7ff,color:#333
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">开源优势</h3>
                    <p class="text-gray-600 mb-6">PandaWiki 完全开源，代码透明可控，确保数据隐私安全，特别适合对数据安全有严格要求的企业自托管需求。</p>
                    <div class="bg-indigo-50 p-6 rounded-lg">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 text-indigo-600 mr-4">
                                <i class="fas fa-lock text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-2">数据主权保障</h4>
                                <p class="text-gray-600 text-sm">所有数据完全掌握在企业自己手中，无需担心云服务供应商的数据安全问题。</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-4">与传统工具对比</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="text-left py-3 px-4">功能</th>
                                    <th class="text-left py-3 px-4">PandaWiki</th>
                                    <th class="text-left py-3 px-4">传统工具</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-gray-100">
                                    <td class="py-3 px-4">AI智能创作</td>
                                    <td class="py-3 px-4 text-indigo-600 font-medium"><i class="fas fa-check"></i> 支持</td>
                                    <td class="py-3 px-4 text-gray-500"><i class="fas fa-times"></i> 不支持</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-3 px-4">智能问答</td>
                                    <td class="py-3 px-4 text-indigo-600 font-medium"><i class="fas fa-check"></i> 支持</td>
                                    <td class="py-3 px-4 text-gray-500"><i class="fas fa-times"></i> 不支持</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-3 px-4">开源免费</td>
                                    <td class="py-3 px-4 text-indigo-600 font-medium"><i class="fas fa-check"></i> 是</td>
                                    <td class="py-3 px-4 text-gray-500"><i class="fas fa-times"></i> 通常收费</td>
                                </tr>
                                <tr>
                                    <td class="py-3 px-4">模型自定义</td>
                                    <td class="py-3 px-4 text-indigo-600 font-medium"><i class="fas fa-check"></i> 支持</td>
                                    <td class="py-3 px-4 text-gray-500"><i class="fas fa-times"></i> 不支持</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Get Started Section -->
    <section id="get-started" class="py-16 px-4 bg-gray-100">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">上手指南</h2>
                <div class="w-20 h-1 bg-indigo-500 mx-auto mb-6"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">只需简单几步，即可部署您的PandaWiki知识库系统</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="text-indigo-600 text-3xl mb-4 font-bold">1</div>
                    <h3 class="text-xl font-bold mb-3">系统要求</h3>
                    <ul class="text-gray-600 space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
                            <span>Linux 服务器</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
                            <span>Docker 20.x 以上版本</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
                            <span>4GB 以上内存</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="text-indigo-600 text-3xl mb-4 font-bold">2</div>
                    <h3 class="text-xl font-bold mb-3">安装部署</h3>
                    <p class="text-gray-600 mb-4">执行以下命令一键安装：</p>
                    <div class="bg-gray-800 text-gray-100 p-4 rounded-lg font-mono text-sm overflow-x-auto">
                        bash -c "$(curl -fsSLk https://release.baizhi.cloud/panda-wiki/manager.sh)"
                    </div>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="text-indigo-600 text-3xl mb-4 font-bold">3</div>
                    <h3 class="text-xl font-bold mb-3">开始使用</h3>
                    <ul class="text-gray-600 space-y-2">
                        <li class="flex items-start">
                            <i class="fas fa-arrow-right text-indigo-500 mt-1 mr-2"></i>
                            <span>按提示完成安装</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-arrow-right text-indigo-500 mt-1 mr-2"></i>
                            <span>获取控制台地址和登录凭证</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-arrow-right text-indigo-500 mt-1 mr-2"></i>
                            <span>上传文档，配置知识库和AI模型</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="bg-indigo-600 text-white rounded-xl shadow-sm overflow-hidden">
                <div class="p-8 md:p-12">
                    <div class="flex flex-col md:flex-row items-center">
                        <div class="md:w-2/3 mb-6 md:mb-0">
                            <h3 class="text-xl font-bold mb-3">准备好开始您的智能知识管理之旅了吗？</h3>
                            <p class="opacity-90">PandaWiki 完全开源免费，无需注册，立即部署体验AI驱动的知识管理解决方案。</p>
                        </div>
                        <div class="md:w-1/3 flex justify-center md:justify-end">
                            <a href="https://github.com/chaitin/PandaWiki" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300 flex items-center">
                                <i class="fab fa-github mr-2"></i> 访问 GitHub
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
            }
        });
    </script>
</body>
</html>